<template>
  <!-- 各种类型矩阵 -->
  <div
    class="toolbar"
    :style="toolBarStyle"
    @drop="dragHandler"
    @dragover="handleTreeDragMouseover">
    <div v-for="item in toolbar" :key="item.key" class="toolbarDiv">
      <div class="toolbarItem" :class="{_disabled:item.disabled}" :style="{width:item.width}" @click="item.type === 'button' && item.fn()">
        <a-dropdown
          v-if="item.type === 'checkList'"
          class="_dropdown"
          :trigger="['click']"
        >
          <a-tooltip placement="bottom" :mouseEnterDelay="1">
            <template slot="title">
              {{ item.tips }}
            </template>
            <div>
              <div :class="`icon icon_${item.name}`"></div>
              <span v-if="item.des">{{item.des}}</span>
              <a-icon type="down" />
            </div>
          </a-tooltip>
          <a-menu slot="overlay" class="checkListMenu">
            <a-checkbox-group
              v-if="item.children.length !== 0"
              :options="item.children"
              :value="selectedColumnIds"
              @change="onChange"
            >
              <span slot="label" slot-scope="{ label }">{{ label }}</span>
            </a-checkbox-group>
          </a-menu>
        </a-dropdown>
        <a-dropdown v-else-if="item.type === 'buttonList'" class="_dropdown" :trigger="['click']">
          <a-tooltip placement="bottom" :mouseEnterDelay="1">
            <template slot="title">
              {{item.tips}}
            </template>
            <div class="itemContent"><div :class="`icon icon_${item.name}`" ></div><div style="margin-right: 2px">{{item.des}}</div><a-icon  type="down" /></div>
          </a-tooltip>
          <a-menu slot="overlay" class="buttonList">
            <a-menu-item v-for="subItem in item.children" :key="subItem.key" :disabled="subItem.disabled && !selectedRow" @click="subItem.fn">
              {{subItem.name}}
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <div v-else>
          <a-tooltip placement="bottom" :mouseEnterDelay="1">
            <template v-if="item.name !== 'topiconline'" slot="title">
              {{item.tips}}
            </template>
            <div :class="`icon icon_${item.name} `" ></div>
          </a-tooltip>
        </div>
        <div v-if="item.type === 'button'">{{item.des}}</div>
      </div>
      <div v-if="item.line" class="iconbarline">
        <img src="statics/icons/app/barline.svg">
      </div>
    </div>
    <div class="toolbarItem">
      <a-tooltip placement="bottom" :mouseEnterDelay="1">
        <template slot="title">
          缩放百分比
        </template>
        <div class="itemContent">
          <div class="_top-btn" @click="handleZoomSmall">
            <img src="statics/icons/app/toolbarreduce.svg" class="_btn-img"/>
          </div>
          <div class="_top-btn scale">{{btns.zoom.scale}}%</div>
          <div class="_top-btn" @click="handleZoomLarge">
            <img src="statics/icons/app/toolbarenlarge.svg" class="_btn-img"/>
          </div>
        </div>
      </a-tooltip>
    </div>

    <!-- 弹框 -->

    <!-- 内容选择 -->
    <div v-if="showContent" class="g-absolute" style="left:10px;top:41px;width:100%;height:136px;z-index:1000;margin-top:32px;display:flex;flex-direction:row;background:#FAFAFA;">
      <div style="width:600px;padding-left:20px">
        <div class="g-m-b-10" style="display:flex;flex-direction:row;" >
          <span style="width:110px;" class="g-m-t-4">行元素类型</span>
          <div class="barinput ant-select-selection" :data-dragtype="1" >
            <a-tooltip slot="suffix" class="_img-btn"  @click="toggleElementTypeModal({isCol:true})" >
              <img style="height:14px;width:14px;" src='statics/icons/app/iconmore.png'>
            </a-tooltip>
            <div class="barlabel" :data-dragtype="1">{{colType}}</div>
          </div>

        </div>
        <div class="g-m-b-10" style="display:flex;flex-direction:row;" >
          <span style="width:110px;" class="g-m-t-4">行元素范围</span>
          <div class="barinput ant-select-selection" :data-dragtype="2" >
            <a-tooltip slot="suffix" class="_img-btn"  @click="toggleScopeModal({isCol:false})">
              <img style="height:14px;width:14px" src='statics/icons/app/iconmore.png'>
            </a-tooltip>
            <div class="barlabel" :data-dragtype="2">{{rowScope}}</div>
          </div>
        </div>
        <div class="g-m-b-10" style="display:flex;flex-direction:row;">
          <span style="width:110px;" class="g-m-t-4">显示关系类型</span>
          <!-- ant-input ant-input-disabled -->
          <div :class="dependencyCriteriaClass"  :data-dragtype="5" >
            <a-tooltip
              slot="suffix"
              class="_img-btn"
              style="cursor:pointer"
              @click="toggleRelationTypeModal">
              <img style="height:14px;width:14px" src='statics/icons/app/iconmore.png'>
            </a-tooltip>
            <div class="barlabel"  :data-dragtype="5">{{dependencyCriteria}}</div>

          </div>
        </div>
      </div>
      <div  style="width:600px;margin-left:50px;">
        <div class="g-m-b-10" style="display:flex;flex-direction:row;">
          <span style="width:110px;" class="g-m-t-4" >列元素类型</span>

          <div class="barinput ant-select-selection" :data-dragtype="3" >
            <a-tooltip slot="suffix" class="_img-btn"  @click="toggleElementTypeModal({isCol:false})" >
              <img style="height:14px;width:14px" src='statics/icons/app/iconmore.png'>
            </a-tooltip>
            <div class="barlabel" :data-dragtype="3">{{rowType}}</div>

          </div>
        </div>
        <div class="g-m-b-10" style="display:flex;flex-direction:row;">
          <span style="width:110px;" class="g-m-t-4">列元素范围</span>

          <div class="barinput ant-select-selection" :data-dragtype="4" >
            <a-tooltip slot="suffix"  class="_img-btn"  @click="toggleScopeModal({isCol:true})">
              <img style="height:14px;width:14px;" src='statics/icons/app/iconmore.png'>
            </a-tooltip>
            <div class="barlabel" :data-dragtype="4">{{colScope}}</div>
          </div>
        </div>
        <div class="g-m-b-10" style="display:flex;flex-direction:row;">
          <span style="width:110px;" class="g-m-t-4">显示关系方向</span>

          <a-input-group compact>
            <a-select style="width: 100%" :default-value="$parent.$refs.treeTable.MatrixFilter.dicrection" @change="directionChange">
              <a-select-option value="rowToCol">
                从行到列
              </a-select-option>
              <a-select-option value="colToRow">
                从列到行
              </a-select-option>
              <a-select-option value="both">
                双向
              </a-select-option>
            </a-select>

          </a-input-group>
          <!-- <a-input ref="userNameInput" v-model="userName" placeholder="从模型浏览器中拖动图元">
            <a-tooltip slot="suffix" class="_img-btn">
              <img style="height:12px;width:12px" src='statics/icons/app/iconmore.png'>
            </a-tooltip>
          </a-input> -->
        </div>
      </div>

    </div>

  </div>
</template>
<script>
import graph from 'src/pages/mxgraph/graph/index';
//// import { isReadOnlyMode } from 'src/util/readOnly';
import { selectMutiple } from 'src/components/Attribute/modals/SelectMutiple';
import { relationTypeModal } from 'src/components/RequirementRelationMap/Modal/RelationType';
import { elementTypeModal } from 'src/components/RequirementRelationMap/Modal/ElementType';
import { throttle } from 'lodash';
import { graphHelper } from 'src/api/GraphHelper';
import treeUtil from '../.././ModelTree/treeUtil';

let isReadOnly = false;

function isReadOnlyMode() {
  return isReadOnly;
}

const {
  mxEvent,
  mxCodec,
  mxUtils,
  mxCompactTreeLayout,
  mxCircleLayout,
  mxCompositeLayout,
  mxEdgeLabelLayout,
  mxFastOrganicLayout,
  mxParallelEdgeLayout,
  mxPartitionLayout,
  mxRadialTreeLayout,
  mxStackLayout
} = graph;
export default {
  name: 'top-bar',
  components: {
  },
  props: {
    tableId: {
      type: String
    }
  },
  data() {
    return {
      showContent: false,
      showRowSelection: false,
      inSelect: false,
      activeKey: ['1'],
      MatrixFilter: {},
      selectedColumnIds: [],
      btns: {
        undo: {
          disabled: true

        },
        redo: {
          disabled: true
        },

        del: {
          disabled: true
        },
        zoom: {
          scale: 100,
          smallDisabled: true,
          largeDisabled: true

        },

      },
      toolbar: [
        {
          name: 'recall',
          key: 'recall',
          icon: 'recall',
          type: 'button',
          tips: '重做',
          des: '',
          width: '20px',
          fn: this.handleUndo,
          disabled: true,
        },
        {
          name: 'redo',
          key: 'redo',
          icon: 'redo',
          type: 'button',
          tips: '撤销',
          des: '',
          width: '20px',
          fn: this.handleRedo,
          disabled: true,
        },
        {
          name: 'showModelPosition',
          key: 'showModelPosition',
          icon: 'icontreelocation',
          type: 'button',
          tips: '树上高亮',
          des: '',
          width: '20px',
          disabled: true,
          fn: this.showModelPostion,
        },
        {
          name: 'iconlayout',
          key: 'iconlayout',
          icon: 'iconlayout',
          type: 'buttonList',
          tips: '布局',
          des: '',
          width: '36px',
          children: [
            {
              name: '横向',
            },
            {
              name: '纵向',
            },
            {
              name: '放射状',
            },
            {
              name: '按顺序',
            },
            {
              name: '环形',
            }
          ],
        },
        {
          name: 'deleteIcon',
          key: 'deleteIcon',
          icon: 'deleteIcon',
          type: 'button',
          tips: '删除',
          des: '',
          width: '20px',
          line: true,
          fn: this.handleDelete,
          disabled: true,
        },
        {
          name: 'removeIcon',
          key: 'removeIcon',
          icon: 'removeIcon',
          type: 'button',
          tips: '移出',
          fn: this.removeNode,
          des: '移出',
          width: '50px',
          line: true,
          //// disabled: true,
        },
        {
          name: 'interchange',
          key: 'interchange',
          icon: 'interchange',
          type: 'button',
          tips: '行列互换',
          des: '行列互换',
          width: '70px',
          line: true,
          fn: this.swapTable
        },
        {
          name: 'toolbarlayer',
          key: 'toolbarlayer',
          icon: 'toolbarlayer',
          type: 'buttonList',
          tips: '显示内容',
          des: '显示内容',
          width: '90px',
          line: true,
          fn: (e) => e.preventDefault(),
          children: [
            {
              name: '全部显示',
              value: 'showAll',
              fn: () => this.emptyFilterTypeSelected(0)
            },
            {
              name: '非空矩阵',
              value: 'nonemptyMatrix',
              fn: () => this.emptyFilterTypeSelected(1)
            },
            {
              name: '空矩阵',
              value: 'emptyMatrix',
              fn: () => this.emptyFilterTypeSelected(2)
            }
            //// {
            ////   label: '行为空矩阵',
            ////   value: 'behaviorEmptyMatrix',
            ////   fn: () => this.emptyFilterTypeSelected(3)
            //// },
            //// {
            ////   label: '列为空矩阵',
            ////   value: 'columnEmptyMatrix',
            ////   fn: () => this.emptyFilterTypeSelected(4)
            //// }
          ],
        },
        {
          name: 'contentselection',
          key: 'contentselection',
          icon: 'contentselection',
          type: 'button',
          tips: '内容选择',
          des: '内容选择',
          width: '70px',
          line: true,
          fn: this.selectContent
        },
        {
          name: 'topiconsearch2',
          key: 'topiconsearch2',
          icon: 'topiconsearch2',
          type: 'button',
          tips: '搜索',
          des: '',
          width: '24px',
          line: true,
          disabled: true,
          fn: () => {},
        }
      ]
    };
  },
  computed: {
    /* graph(){
      return  this.ui.editor.graph;
    } */
    rowType(){
      let text = this.MatrixFilter.rowType.map(x => x.title).join().substring(0, 29);
      if (text.length == 0){
        text = "从模型浏览器中拖动图元";
      }
      return text;
    },
    colType(){
      let text = this.MatrixFilter.colType.map(x => x.title).join().substring(0, 29);
      if (text.length == 0){
        text = "从模型浏览器中拖动图元";
      }
      return text;
    },
    toolBarStyle(){
      return  { height: this.$globalConfig.toolBarHeight + 'px', marginBottom: this.showContent ? '155px' : '0px' };
    },
    dependencyCriteriaClass(){
      if (this.MatrixFilter.realationSelectionEnabled){
        return  'barinput ant-select-selection';
      } else {
        return 'ant-input ant-input-disabled';
      }
    },
    dependencyCriteria(){
      let dep = this.MatrixFilter.dependencyCriteria.filter(x => x.isVisible).map(x => x.name).join().substring(0, 29);
      dep = dep || '';
      if (dep.length == 0){
        dep = "从模型浏览器中拖动图元";
      }
      return dep;
    },
    rowScope(){
      let realCol = [];
      //// console.time('findeRealNode');
      this.MatrixFilter.rowScope.forEach(x => {
        const node = graphHelper.getGraphNodeById(x, app.activeProjectId);
        if (node){
          realCol.push(node);
        } else {
          console.log('此节点可能已经删除');
        }
      });
      let text = realCol.map(x => x.title).join().substring(0, 29);
      if (realCol.length == 0){
        text = "从模型浏览器中拖动图元";
      }
      return text;
    },
    colScope(){
      let realCol = [];
      //// console.time('findeRealNode');
      this.MatrixFilter.colScope.forEach(x => {
        const node = graphHelper.getGraphNodeById(x, app.activeProjectId);
        if (node){
          realCol.push(node);
        } else {
          console.log('此节点可能已经删除');
        }
      });
      let text = realCol.map(x => x.title).join().substring(0, 29);
      if (realCol.length == 0){
        text = "从模型浏览器中拖动图元";
      }
      return text;
    }

  },
  created(){
    //// this.MatrixFilter = this.$parent.$refs.treeTable.MatrixFilter;
    const diagramNode = graphHelper.getGraphNodeById(this.tableId, app.activeProjectId);
    isReadOnly = diagramNode.disabled;
    if (isReadOnlyMode()){
      this.btns.del.disabled = true;
    }
  },
  beforeDestroy(){

  },
  methods: {
    onChange(checkValue) {
      this.selectedColumnIds = checkValue;
    },
   
    handleTreeDragMouseover(event) {
      event.preventDefault();
      this.handleTreeDragMouseover_(event);
    },
    handleTreeDragMouseover_(event) {
      if (!treeUtil.dragData) return;
      const model = treeUtil.dragData.model;      
      const typeName = model.typeName;
      if (typeName === 'Requirement') {
        event.dataTransfer.dropEffect = 'copy';
      }
    },
    dragHandler(event) {
      console.log('triger drag', event, treeUtil.dragData);
      const dragData = treeUtil.dragData;
      if (!dragData) return;
      const typeName = dragData.model.typeName;
      console.log(typeName);

      let treeList = treeUtil.buildMatrixTypeList();
      console.log(treeList);
      treeList = treeList[0].children;
      let reqType = treeList.filter(x => x.value == typeName);
      let dragtype = event.toElement.dataset.dragtype;      
       
      let ids = [dragData.id];
      if (dragtype === '1'){
        this.$parent.$refs.treeTable.MatrixFilter.colType = reqType;
      } else if (dragtype === '3'){
        this.$parent.$refs.treeTable.MatrixFilter.rowType = reqType;
      } else if (dragtype == '2'){
        this.$parent.$refs.treeTable.MatrixFilter.rowScope = ids;
      } else if (dragtype == '4'){
        this.$parent.$refs.treeTable.MatrixFilter.colScope = ids;

      } else if (dragtype == '5'){
        if (this.MatrixFilter.realationSelectionEnabled){
          this.$parent.$refs.treeTable.MatrixFilter.dependencyCriteria.forEach(x => {
            x.isVisible = x.icon == typeName;
          });
        }
      
      } else {
        console.log("非目标位置");
        return; 
      }
      this.refreshBar();
      this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);
      
    },
    refreshBar(){

      this.MatrixFilter = this.$parent.$refs.treeTable.MatrixFilter;
      console.log('refresh bar', this.MatrixFilter);
    },
    emptyFilterTypeSelected(index){
      if (this.MatrixFilter === {} || this.MatrixFilter === undefined) return;
      console.log(index);
      this.$parent.$refs.treeTable.MatrixFilter.emptyFilterType = index;
      this.refreshBar();
      this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

    },
    swapTable(){
      //// this.swapStatus=!this.swapStatus
      //// 行列互换先关闭折叠
      this.$parent.$refs.treeTable.treeToggleCol = {};
      this.$parent.$refs.treeTable.treeToggleRow = {};
      this.$parent.$refs.treeTable.MatrixFilter.swapStatus = !this.$parent.$refs.treeTable.MatrixFilter.swapStatus;
      this.refreshBar();
      this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

    },
    toggleRelationTypeModal: throttle(function() {
      if (this.MatrixFilter.realationSelectionEnabled === false){ return; }
      relationTypeModal.popup({
        legend: this.$parent.$refs.treeTable.MatrixFilter.dependencyCriteria,
        trace: false
      }).then(res => {
        console.log(res);
        this.$parent.$refs.treeTable.MatrixFilter.dependencyCriteria = res;
        console.log(this.$parent.$refs.treeTable.MatrixFilter);
        this.refreshBar();
        this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

      });
    }, 1000),
    toggleElementTypeModal: throttle(function({ isCol }) {
      console.log(isCol, 'isCol');
      elementTypeModal.popup({ graphType: 'matrix', defaultChecks: isCol ? this.$parent.$refs.treeTable.MatrixFilter.colType.map(x => x.key) : this.$parent.$refs.treeTable.MatrixFilter.rowType.map(x => x.key) }).then(res => {
        console.log(res);
        if (isCol){
          this.$parent.$refs.treeTable.MatrixFilter.colType = res.checkedNodes;
          //// this.MatrixFilter.colType = res.checkedNodes;
        } else {
          this.$parent.$refs.treeTable.MatrixFilter.rowType = res.checkedNodes;
          //// this.MatrixFilter.rowType = res.checkedNodes;
        }
        this.refreshBar();
        this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

      });
    }, 1000),
    toggleScopeModal: throttle(function({ isCol }) {

      let currentIds = [];
      if (isCol){
        currentIds = this.$parent.$refs.treeTable.MatrixFilter.colScope;
      } else {
        currentIds = this.$parent.$refs.treeTable.MatrixFilter.rowScope;
      }
      console.log({ currentIds });
      selectMutiple.popup({
        currentIds,
        selectedElement: app.selectedElement.model,
        propertyKey: 'Not Exists PropertyKey',
        isNodeSelectable: node => { return node.getTypeName() !== 'Relations'; }
      }).then(res => {

        let ids = res.map(x => x.id);
        console.log(isCol, { res, ids });
        if (isCol){
          this.$parent.$refs.treeTable.MatrixFilter.colScope = ids;
        } else {
          this.$parent.$refs.treeTable.MatrixFilter.rowScope = ids;
        }
        this.refreshBar();
        this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

      });
    }, 1000),
    handleUndo(){
      app.$messageBox.warn({
      //// id: 100,
        text: '功能开发中，敬请期待',
        title: '试用版'
      });

    },
    handleRedo(){
      app.$messageBox.warn({
      //// id: 100,
        text: '功能开发中，敬请期待',
        title: '试用版'
      });

    },

    handleDelete(){

      !this.btns.del.disabled && this.graph.actions['ctrl-d']();

    },
    selectContent(){
      this.refreshBar();
      this.showContent = !this.showContent;

    },

    handleZoomSmall(){
      if (this.btns.zoom.scale <= 10) return;
      if (this.btns.zoom.scale < 20){
        this.btns.zoom.scale = 10;
      } else {
        this.btns.zoom.scale -= 10;
      }
      //// this.ui.editor.graph.zoomTo(this.btns.zoom.scale / 100);

    },
    handleZoomLarge(){
      if (this.btns.zoom.scale >= 1000) return;
      if (this.btns.zoom.scale >= 900){
        this.btns.zoom.scale = 1000;
      } else {
        this.btns.zoom.scale += 10;
      }
      //// this.ui.editor.graph.zoomTo(this.btns.zoom.scale / 100);

    },

    handleScale(graph, evt){
      console.log(evt);
      //// TODO
      this.btns.zoom.scale =  parseInt( evt.properties.scale * 100) || 0;
    },
    handleSelectChange(graph, evt){
      if (isReadOnlyMode()) return;
      const { added, removed }  = evt.properties;
      this.btns.del.disabled = !(this.graph.selectionModel.cells.length > 0 || !this.graph.selectionModel.cells.find(cell => cell.deep === 0));
      //// cells;
    },
    directionChange(value){
      console.log(value);
      this.$parent.$refs.treeTable.MatrixFilter.dicrection = value;
      console.log(this.$parent.$refs.treeTable.MatrixFilter);
      this.refreshBar();
      this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

    },
    removeNode(){
      let x = this.$parent.$refs.treeTable.selectedHeadX;
      let y = this.$parent.$refs.treeTable.selectedHeadY;
      console.log(x, y);
      //// 应对行列互换
      if (this.$parent.$refs.treeTable.MatrixFilter.swapStatus){
        y = this.$parent.$refs.treeTable.selectedHeadX;
        x = this.$parent.$refs.treeTable.selectedHeadY;
      }

      if (x != null){
        if ( this.$parent.$refs.treeTable.MatrixFilter.removedNodes.filter(z => z.datatype === 'row'
        && z.id === x).length > 0){
          console.log('重复过滤');
        } else {
          this.$parent.$refs.treeTable.MatrixFilter.removedNodes.push({ datatype: 'row', key: x });

        }
      }
      if (y != null){
        if ( this.$parent.$refs.treeTable.MatrixFilter.removedNodes.filter(z => z.datatype === 'col'
        && z.id === y).length > 0){
          console.log('重复过滤');
        } else {
          this.$parent.$refs.treeTable.MatrixFilter.removedNodes.push({ datatype: 'col', key: y });

        }
      }
      console.log(this.$parent.$refs.treeTable.MatrixFilter);
      this.refreshBar();
      this.$bus.emit('filter-update', this.$parent.$refs.treeTable.MatrixFilter);

    },
    removeUmlShape(cells){
      cells.forEach(cell => {
        cell.umlShape = undefined;
        if (cell.children && cell.children.length > 0){
          this.removeUmlShape(cell.children);
          //// cell.children.umlShape=undefined
        }
      });
    },

  }
};
</script>
<style lang="scss">
.toolbar {
	width: 100%;
	height: 28px;
	line-height: 28px;
	padding-left: 4px;
	font-size: 12px;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	background: #d4ebf8;
	border-bottom: 1px solid #99b1c5;
	.toolbarDiv {
		display: flex;
		height: 28px;
		line-height: 28px;
		align-items: center;
	}
	.toolbarItem {
		display: flex;
		height: 24px;
		line-height: 24px;
		margin-left: 12px;

		cursor: pointer;
		padding: 1px;
		&.disabled {
			opacity: 0.25;
			cursor: not-allowed;
		}

		&:hover {
			background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%);
			border: 1px solid #b1cee2;
			padding: 0px;
		}
		.itemContent {
			display: flex;
			align-items: center;
			text-align: center;
			height: 24px;
			line-height: 24px;
      font-size: 12px;
      &.ant-tooltip-open{
        font-size:12px;
      }
			._top-btn {
				._btn-img {
					margin-top: -2px;
				}
			}
			.scale {
				margin: 0 4px;
			}
		}
	}
	._disabled {
		opacity: 0.5;
		cursor: not-allowed;
		&:hover {
			background: transparent;
			opacity: 0.2;
		}
	}
	.icon {
		width: 16px;
		height: 16px;
		margin: 4px 2px;
		display: inline-block;
		vertical-align: middle;
		background-size: 16px 16px;
		background-repeat: no-repeat;
		&.icon_showModelPosition {
			background-image: url('~statics/icons/table/showModelPosition.svg');
		}
		//// &.icon_requirementField{
		////   background-image: url('../../statics/icons/table/requirementField.svg');
		//// }
		&.icon_requirementField {
			background-image: url('~statics/images/mainpage/iconchoose.svg');
		}
		&.icon_addRequirement {
			background-image: url('~statics/icons/table/addRequirement.svg');
		}
		&.icon_selectRequirement {
			background-image: url('~statics/icons/table/selectRequirement.svg');
		}
		&.icon_deleteIcon {
			background-image: url('~statics/icons/table/deleteRequirement.svg');
		}
		&.icon_removeIcon {
			background-image: url('~statics/icons/table/removeFromTable.svg');
		}
		&.icon_recall {
			background-image: url('~statics/icons/app/toolbarrecall.svg');
		}
		&.icon_redo {
			background-image: url('~statics/icons/app/toolbarredo.svg');
		}
		&.icon_iconMovedown {
			background-image: url('~statics/icons/table/iconMovedown.svg');
		}
		&.icon_iconMoveup {
			background-image: url('~statics/icons/table/iconMoveup.svg');
		}
		&.icon_iconLegend {
			background-image: url('~statics/icons/table/iconLegend.svg');
		}
		&.icon_iconleadin {
			background-image: url('~statics/icons/table/iconleadin.svg');
		}
		&.icon_iconexport {
			background-image: url('~statics/icons/table/iconexport.svg');
		}
		&.icon_toolbarreduce {
			background-image: url('~statics/icons/app/toolbarreduce.svg');
		}
		&.icon_toolbarenlarge {
			background-image: url('~statics/icons/app/toolbarenlarge.svg');
		}
		&.icon_iconlayout {
			background-image: url('~statics/icons/graph/iconlayout.svg');
		}
		&.icon_toolbarline {
			background-image: url('~statics/icons/graph/toolbarline.svg');
    }
		&.icon_interchange {
			background-image: url('~statics/icons/app/iconinterchange.svg');
    }
    &.icon_toolbarlayer {
			background-image: url('~statics/images/mainpage/iconchoose.svg');
    }
		&.icon_contentselection {
			background-image: url('~statics/icons/app/iconcontentselection.svg');
    }
		&.icon_topiconsearch2 {
			background-image: url('~statics/icons/table/iconsearch.svg');
    }

	}
	.icon_topiconline {
		width: 1px;
		height: 25px;
		line-height: 32px;
		margin-left: 8px;
		border: 1px solid #b1cee2;
	}
	.iconbarline {
		margin-left: 8px;
	}
}
.g-absolute{

  .barinput.ant-select-selection,.ant-input.ant-input-disabled
  {
    //// background-color: red;
        width: 100%;
        height: 32px;
        position: relative;
    .barlabel{
      font-size: 12px;
      width: calc(100% - 72px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position:absolute;
      line-height: 30px;
      left: 10px;
    }
        ._img-btn{
          position:absolute;
      top: 8px;
      right: 5px;
        }
  }
  .barinput.ant-select-selection{
    .barlabel{
      top:0;
    }
  }

  .ant-input.ant-input-disabled{
    .barlabel{
      line-height: 22px;
      top:5px;
    }
  }
	._top-btn {
		width: 20px;
		height: 20px;
		margin: 0 8px;
		background: transparent;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		._btn-img {
			display: inline-block;
			padding: 2px;
			height: 20px;
			vertical-align: top;
		}
		&:hover {
			background: #f4df99;
			opacity: 1;
		}
		&._disabled {
			opacity: 0.2;
			cursor: not-allowed;
			&:hover {
				background: transparent;
				opacity: 0.2;
			}
		}
	}
}
.ant-dropdown /deep/ .ant-dropdown-menu-item {
	font-size: 12px;
}
.checkListMenu {
		.ant-checkbox-group {
			display: flex;
      font-size: 12px;
			flex-direction: column;
			padding: 4px;
			label.ant-checkbox-wrapper {
        font-size: 12px;
				margin-left: 4px;
				&:hover {
					background: linear-gradient(
						180deg,
						#e7f5fe 0%,
						#b0deff 65%,
						#b2ddfd 100%
					);
				}
			}
		}
	}
</style>
